<template>
    <div class="system-table-box">
        <div class="table-extra-box">
            <el-table v-bind="$attrs" ref="table" class="system-table" border :data="data" height="100%" @selection-change="handleSelectionChange" size="small">
                <el-table-column type="selection" align="center" width="50" v-if="showSelection" />
                <el-table-column label="序号" width="60" align="center" v-if="showCurrent">
                    <template #default="scope">
                        {{ (page.current - 1) * page.size + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <slot></slot>
            </el-table>
            <div v-if="$slots.extra" class="table-extra">
                <slot name="extra"></slot>
            </div>
        </div>
        <el-pagination v-if="showPage" v-model:current-page="page.current" class="system-page" background :layout="pageLayout" :pager-count="5" :total="page.total" :page-size="page.size" :page-sizes="pageSizes" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
</template>

<script lang="ts">
import {defineComponent, ref, onActivated} from 'vue'

export default defineComponent({
    props: {
        data         : {
            type   : Array,
            default: () => []
        }, // 数据源
        select       : {
            type   : Array,
            default: () => []
        }, // 已选择的数据，与selection结合使用
        showCurrent  : {
            type   : Boolean,
            default: false
        }, // 是否展示index选择，默认否
        showSelection: {
            type   : Boolean,
            default: false
        }, // 是否展示选择框，默认否
        showPage     : {
            type   : Boolean,
            default: true
        }, // 是否展示页级组件，默认是
        page         : { // 分页参数
            type   : Object,
            default: () => {
                return {
                    current: 1,
                    size   : 20,
                    total  : 0
                }
            }
        },
        pageLayout   : {
            type   : String,
            default: "total, sizes, prev, pager, next, jumper"
        }, // 分页需要显示的东西，默认全部
        pageSizes    : {
            type   : Array,
            default: [10, 20, 50, 100]
        }
    },
    setup(props, context) {
        const table: any            = ref(null)
        let timer: any              = null
        // 分页相关：监听页码切换事件
        const handleCurrentChange   = (val: Number) => {
            if (timer) {
                props.page.current = 1
            }
            else {
                props.page.current = val
                context.emit("getTableData")
            }
        }
        // 分页相关：监听单页显示数量切换事件
        const handleSizeChange      = (val: Number) => {
            timer = 'work'
            setTimeout(() => {
                timer = null
            }, 100)
            props.page.size = val
            context.emit("getTableData", true)
        }
        // 选择监听器
        const handleSelectionChange = (val: []) => {
            context.emit("selection-change", val)
        }
        // 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
        onActivated(() => {
            table.value.doLayout()
        })
        return {
            table,
            handleCurrentChange,
            handleSizeChange,
            handleSelectionChange
        }
    }
})
</script>

<style lang="scss" scoped>
.system-table-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;

    .table-extra-box {
        height: calc(100% - 56px);
        display: flex;
        flex-direction: row;
        width: 100%;

        .system-table {
            flex: 1;
        }

        .table-extra {
            flex: 1;
            padding: 10px;
            border: 1px solid #ebeef5;
        }
    }


    .system-page {
        margin-top: 20px;
    }
}
</style>
